<template>
	<view class="container">
		<view class="tabList">
			<view :class="[{ active: index == active }]" v-for="(item, index) in listName" @click="tabChange(index)">{{ item }}</view>
		</view>
		<view class="listItem"><listItem :active="active" /></view>
	</view>
</template>

<script>
import listItem from './component/listItem.vue';
export default {
	components: {
		listItem
	},
	data() {
		return {
			listName: ['全部', '机票', '火车', '酒店'],
			active: 0
		};
	},
	methods: {
		// 切换tab
		tabChange(index) {
			this.active = index;
		}
	}
};
</script>

<style lang="scss">
.container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding-bottom: env(safe-area-inset-bottom);
	padding-bottom: constant(safe-area-inset-bottom);
	display: flex;
	flex-direction: column;
	.tabList {
		width: calc(100% - 64rpx);
		padding: 0 32rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #ffffff;
		display: flex;
		justify-content: space-between;
	}
	.active {
		color: #00bb93;
		border-bottom: 2px solid #00bb93;
	}
	.listItem {
		flex: 1;
		overflow-y: scroll;
		background-color: #f7f7f7;
	}
}
</style>
